<template>
    <div class="border-content" :style="{width:width,height:height}">
        <div class="line-bor-left line-bor">
            <div class="line-g"></div>
            <div class="line-b">
                <span class="line-b-i b-top"></span>
                <span class="line-b-i b-bot"></span>
            </div>
        </div>
        <div class="line-bor-right line-bor">
            <div class="line-g"></div>
            <div class="line-b">
                <span class="line-b-i b-top"></span>
                <span class="line-b-i b-bot"></span>
            </div>
        </div>
        <div class="bor-title">
            <h2 :style="{minWidth:minw}">
                <div class="tit-left"></div>
                <img style="width: 46px;height: 46px;" :src="imgUrl">
                <span>{{title}}</span>
                <div class="tit-right"></div>
            </h2>
        </div>
        <div class="content-box">
            <slot name="contentbox"></slot>
        </div>
    </div>
</template>

<script>
export default {
    name: "slotcontent",
    /* 外部引入的值 */
    props: {
        title: {
            type: String,
            default: "内容框组件"
        },
        imgUrl: {
            type: String,
            default: "../"
        },
        width: {
            type: String,
            default: "500px"
        },
        height: {
            type: String,
            default: "600px"
        },
        minw: {
            type: String,
            default: ""
        }
    },
    data() {
        return {};
    },
    mounted() {},
    methods: {}
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
</style>
